<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    cardMerchant: 0,
    startAddress: "",
    endAddress: ""
  })
});
import { useRole } from "../utils/hook";
const treeRef = ref();
const tableRef = ref();
const { allCustomer } = useRole(tableRef, treeRef);
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
// console.log("xiugai ", props.formInline);
function getRef() {
  return ruleFormRef.value;
}
const user_name = localStorage.getItem("user_name");

const userStateBoolean = ref();
onMounted(() => {
  // console.log("newValue ", newFormInline.value.status);
  watch(newFormInline, newValue => {
    userStateBoolean.value = newValue.status == 1;
  });

  watch(userStateBoolean, newValue => {
    newFormInline.value.status = newValue ? 1 : 0;
  });
});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="102px"
  >
    <el-form-item label="快捷添加" prop="userState ">
      <el-switch v-model="newFormInline.status" />
    </el-form-item>
    <el-form-item label="卡商" prop="cardMerchant ">
      <el-radio-group v-model="newFormInline.cardMerchant">
        <el-radio value="0" onChange="changeType"> simboss </el-radio>
        <el-radio value="1" onChange="changeType"> 信金 </el-radio>
      </el-radio-group></el-form-item
    >

    <el-form-item v-if="!newFormInline.status" label="卡号" prop="startAddress">
      <el-input
        v-model="newFormInline.startAddress"
        clearable
        placeholder="请输入卡号"
      />
    </el-form-item>
    <el-form-item
      v-if="newFormInline.status"
      label="卡号起"
      prop="startAddress"
    >
      <el-input
        v-model="newFormInline.startAddress"
        clearable
        placeholder="请输入起止卡号"
      />
    </el-form-item>
    <el-form-item v-if="newFormInline.status" label="卡号止" prop="endAddress">
      <el-input
        v-model="newFormInline.endAddress"
        clearable
        placeholder="请输入截止卡号"
      />
    </el-form-item>
  </el-form>
</template>
